<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>wavesurfer.js | Zoom Example</title>

        <link href="data:image/gif;" rel="icon" type="image/x-icon" />

        <!-- Bootstrap -->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

        <link rel="stylesheet" href="../css/style.css" />
        <link rel="stylesheet" href="../css/ribbon.css" />
        <link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />

        <!-- wavesurfer.js -->
        <script src="/example/dist/wavesurfer.js"></script>
        <script src="/example/dist/wavesurfer.timeline.js"></script>
        <script src="/example/dist/wavesurfer.regions.js"></script>

        <!-- Demo -->
        <script src="/example/zoom/main.js"></script>
        
        <!-- highlight.js for syntax highlighting in this example -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
    </head>

    <body>
        <div class="container">

            <div id="demo">
                <div id="waveform">
                    <!-- Here be the waveform -->
                </div>

                <div id="timeline"></div>

                <div class="controls">
                    <div class="row">
                        <div class="col-sm-7">
                            <button class="btn btn-primary" data-action="play">
                                <i class="glyphicon glyphicon-play"></i>
                                Play
                                /
                                <i class="glyphicon glyphicon-pause"></i>
                                Pause
                            </button>
                        </div>

                        <div class="col-sm-1">
                            <i class="glyphicon glyphicon-zoom-in"></i>
                        </div>

                        <div class="col-sm-3">
                          <input data-action="zoom" type="range" min="1" max="200" value="0" style="width: 100%" />
                        </div>

                        <div class="col-sm-1">
                            <i class="glyphicon glyphicon-zoom-out"></i>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </body>
</html>
